<template>
  <div class="skills-container">
    <div class="content-card">
      <h2>专业技能</h2>
      
      <div class="skills-grid">
        <div v-for="(category, index) in skillCategories" :key="index" class="skill-category">
          <h3>{{ category.title }}</h3>
          <ul class="skill-list">
            <li v-for="(skill, skillIndex) in category.skills" :key="skillIndex" class="skill-item">
              <span class="skill-name">{{ skill.name }}</span>
              <span class="skill-level" :class="skill.level">{{ skill.proficiency }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <el-divider content-position="center">项目经验</el-divider>

    <el-timeline>
      <el-timeline-item
        v-for="(project, index) in projects"
        :key="index"
        :timestamp="project.time"
        placement="top"
      >
        <el-card>
          <h4>{{ project.name }}</h4>
          <p>{{ project.description }}</p>
          <el-tag 
            v-for="(tag, tagIndex) in project.tags" 
            :key="tagIndex"
            size="small"
            class="project-tag"
          >
            {{ tag }}
          </el-tag>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'SkillsView',
  data() {
    return {
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      skillCategories: [
        {
          title: '设计技能',
          skills: [
            { name: '室内设计', proficiency: '精通', level: 'expert' },
            { name: '空间规划', proficiency: '精通', level: 'expert' },
            { name: '色彩搭配', proficiency: '熟练', level: 'proficient' },
            { name: '风格定位', proficiency: '精通', level: 'expert' }
          ]
        },
        {
          title: '软件技能',
          skills: [
            { name: '效果图制作', proficiency: '熟练', level: 'proficient' },
            { name: '3D建模', proficiency: '熟悉', level: 'familiar' },
            { name: 'CAD制图', proficiency: '精通', level: 'expert' },
            { name: '后期处理', proficiency: '熟练', level: 'proficient' }
          ]
        },
        {
          title: '项目管理',
          skills: [
            { name: '施工图设计', proficiency: '精通', level: 'expert' },
            { name: '项目协调', proficiency: '熟练', level: 'proficient' },
            { name: '预算控制', proficiency: '熟悉', level: 'familiar' },
            { name: '现场管理', proficiency: '熟练', level: 'proficient' }
          ]
        }
      ],
      projects: [
        {
          name: '示例项目',
          time: '2023-2024',
          description: '这是一个示例项目描述...',
          tags: ['餐饮设计', '效果图', '施工图']
        }
      ]
    }
  }
}
</script>

<style scoped>
.skills-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.content-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.content-card h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.skill-category h3 {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 1.5em;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.skill-name {
  font-size: 16px;
  color: #303133;
}

.skill-level {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.skill-level.expert {
  background-color: #f0f9eb;
  color: #67c23a;
}

.skill-level.proficient {
  background-color: #ecf5ff;
  color: #409eff;
}

.skill-level.familiar {
  background-color: #f4f4f5;
  color: #909399;
}

.project-tag {
  margin-right: 5px;
  margin-top: 10px;
}
</style> 